<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>展会管理</el-breadcrumb-item>
    </el-breadcrumb>
    <h1>展会管理</h1>
    <el-card class="box-card">
      <el-row :gutter="10" class="rowbox">
        <el-col :span="1.2">
          <span class="inputlist">展会列表</span>
        </el-col>
        <el-col :span="4">
          <el-input
            placeholder="搜索..."
            v-model="queryInfo"
            clearable
            size="mini"
          >
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="mini">搜索</el-button>
        </el-col>
        <el-col :span="3">
          <el-button icon="el-icon-plus" size="mini" class="newlist"
            >新建展会</el-button
          >
        </el-col>
      </el-row>
      <el-table :data="exhibilist" border stripe>
        <el-table-column label="序号" type="index" width="55px" ></el-table-column>
        <el-table-column label="展会名称" prop="exhi" class="exhibiname"></el-table-column>
        <el-table-column label="展会时间" prop="time" width="160px"></el-table-column>
        <el-table-column label="展会地址" prop="address"></el-table-column>
        <el-table-column label="负责人" prop="name" width="100px"></el-table-column>
        <el-table-column label="联系电话" prop="tel"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="展会状态" prop="state">
          <template slot-scope="scope">
            <el-button v-if="scope.row.state" type="success" round size="mini">进行中</el-button>
            <el-button v-else="scope.row.state" type="info" round size="mini">已结束</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button plain size="mini">查看</el-button>
            <el-button v-show="scope.row.state" type="primary" size="mini">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: '',
      exhibilist: [
        {
          exhi: '第十九届中国国际煤炭采矿技术交流及设备展览会',
        time: '2021.6.7--2021.6.10',
        address: '中国国际展览中心1号馆',
        name: '李飞',
        tel: '15847563598',
        email: '1565856@163.com',
        state: true
        },
        {
          exhi: '第十九届中国国际煤炭采矿技术交流及设备展览会',
        time: '2021.6.7--2021.6.10',
        address: '中国国际展览中心1号馆',
        name: '李飞',
        tel: '15847563598',
        email: '1565856@163.com',
        state: true
        },
        {
          exhi: '第十九届中国国际煤炭采矿技术交流及设备展览会',
        time: '2021.6.7--2021.6.10',
        address: '中国国际展览中心1号馆',
        name: '李飞',
        tel: '15847563598',
        email: '1565856@163.com',
        state: false
        },
        {
          exhi: '第十九届中国国际煤炭采矿技术交流及设备展览会',
        time: '2021.6.7--2021.6.10',
        address: '中国国际展览中心1号馆',
        name: '李飞',
        tel: '15847563598',
        email: '1565856@163.com',
        state: false
        },
        {
          exhi: '第十九届中国国际煤炭采矿技术交流及设备展览会',
        time: '2021.6.7--2021.6.10',
        address: '中国国际展览中心1号馆',
        name: '李飞',
        tel: '15847563598',
        email: '1565856@163.com',
        state: true
        },
        {
          exhi: '第十九届中国国际煤炭采矿技术交流及设备展览会',
        time: '2021.6.7--2021.6.10',
        address: '中国国际展览中心1号馆',
        name: '李飞',
        tel: '15847563598',
        email: '1565856@163.com',
        state: false
        }
      ]
    };
  },
};
</script>

<style scoped>
.inputlist {
  line-height: 26px;
}
.box-card {
  position: relative;
}
.newlist {
  position: absolute;
  right: 6px;
}
.el-table .exhibiname {
    color: #409eff!important;
}
</style>
